<script setup>
import {ref,onMounted} from "vue"
import xcxPage1Image1 from "./xcxPage1Image1.png"
import xcxPage1Image2 from "./xcxPage1Image2.png"

const wheel = ref(0)
const title1 = ref("首先你可以查看官方文档")
const title2 = ref("需要下载特定的小程序工具来开发")
window.addEventListener('mousewheel',async(event)=>{
    console.log(event.wheelDelta)
    wheel.value += await event.wheelDelta
})

onMounted(()=>{
    
})

const title1DialogBtn = () => {
    wheel.value = 0
}
</script>

<template>
    <div class="xcxAll">
        <h2 class="title1">{{ title1 }}</h2>
        <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E8%B4%A6%E5%8F%B7" class="wxxcxLink">微信小程序官方文档地址</a><br />
        <a href="https://opendocs.alipay.com/mini/developer/getting-started" class="zfbxcxLink">支付宝小程序官方文档</a><br />
        <a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/introduction/usage-guide" class="dyxcxLink">抖音小程序官方文档</a><br />
        
        <h2 class="title2">{{ title2 }}</h2>
        <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" class="wxxcxTool">微信小程序开发工具</a><br />
        <a href="https://opendocs.alipay.com/mini/ide/download?pathHash=9ced7631" class="zfbxcxTool">支付宝小程序开发工具</a><br />
        <a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/developer-instrument/overview" class="dyxcxTool">抖音小程序开发工具</a><br />
        
        <h2 class="title3">创建小程序(以微信小程序为例子)</h2>
        <img :src="xcxPage1Image1" alt="" class="image1"/>

        <h2 class="title4">选择创建项目的属性</h2>
        <img :src="xcxPage1Image2" alt="" class="image2">
    </div>
    <!-- <div class="miniDialogBox">
        <div class="miniDialog1" @click="title1DialogBtn">{{ title1 }}</div>
        <div>{{ title2 }}</div>
    </div> -->
</template>

<style scoped>
.title1{
    position: relative;
    left: 0;
    top: 0;
}
.title2{
    position: relative;
    left: 0;
    top: 4.5%;
}
.title3{
    position: relative;
    left: 0;
    top: 7.5%;
}
.title4{
    position: relative;
    left: 0;
    top: 9.5%;
}
.xcxAll{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
/* 内容布局和样式 */
.wxxcxLink{
    position: relative;
    left: 4%;
    top: 1%;
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #fff;
}
.wxxcxLink:hover,
.wxxcxTool:hover{
    color: rgb(0, 200, 100);
    border-bottom: 1px solid rgb(0, 200, 100);
}
.zfbxcxLink{
    position: relative;
    left: 4%;
    top: 2.5%;
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #fff;
}
.zfbxcxLink:hover,
.zfbxcxTool:hover{
    color: rgb(0, 150, 200);
    border-bottom: 1px solid rgb(0, 150, 200);
}
.dyxcxLink{
    position: relative;
    left: 4%;
    top: 4%;
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #fff;
}
.dyxcxLink:hover,
.dyxcxTool:hover{
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #000;
}
.wxxcxTool{
    position: relative;
    left: 4%;
    top: 5.5%;
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #fff;
}
.zfbxcxTool{
    position: relative;
    left: 4%;
    top: 6.5%;
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #fff;
}
.dyxcxTool{
    position: relative;
    left: 4%;
    top: 7.5%;
    color: rgb(0, 0, 0);
    border-bottom: 1px solid #fff;
}
.image1{
    position: relative;
    left: 4%;
    top: 8.5%;
    width: 600px;
}
.image2{
    position: relative;
    left: 4%;
    top: 10.5%;
    width: 600px;
}
.miniDialogBox{
    position: absolute;
    left: 80%;
    top: 5%;
    width: 15%;
    height: 30%;
    background: rgba(200, 200, 200, 0.3);
    border-radius: 10px;
}
.miniDialog1{
    cursor: pointer;
    user-select: none;
}
</style>